<template>
  <div class="mall">
    <div class="line"></div>
    <div class="title">
      <i class="iconfont icon-heart-fill "></i>
      <div class="tip" @click="switchTips">{{ tip }}</div>
      <div class="list-container">
        <div class="list-item"
             v-for="(item, idx) in list"
             @click.self.prevent="onClickList(item)"
             :key="idx">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="search">
      <div class="logo">Bundle Mall</div>
      <div class="input">
        <i class="iconfont icon-search search"></i>
        <input v-model="searchKey"
               @input="onSearchKeyBlur"
               placeholder="search bundles"/>
      </div>
      <div class="btn" @click.prevent="onBtnSearch">
        <div class="label">
          Search
        </div>
      </div>
    </div>
    <div class="content">
      <Item v-for="(item, idx) in items" :data="item" :key="idx"></Item>
      <div v-if="items.length===0" class="nothing">
        no bundles
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import Item from './item.vue';
import { BundleInfo } from './data';

export default defineComponent({
  name: 'mall',
  components: { Item },
  props: {},
  setup(props, { emit }) {
    const router = useRouter();
    const tips = [
      '这是一个cocos creator bundle商城',
      '你可以将自己写的cocos creator bundle发布到这里',
      '这是一个新的尝试和探索，代码完全开源',
    ];
    const tip = ref('');
    const list = ref([
      { name: 'Sail编辑器', value: '', url: '', router: 'home' },
      { name: '文档', value: '', url: 'http://tidys.gitee.io/doc/#/sail/index', router: '' },
    ]);
    const items = ref<BundleInfo[]>([]);

    function switchTips() {
      let idx = tips.findIndex(el => el === tip.value);
      idx++;
      if (idx >= tips.length) {
        idx = 0;
      }
      tip.value = tips[idx];
    }

    let timer: any | null = null;

    function scrollBegan() {
      timer = setInterval(switchTips, 5000);
    }

    function scrollEnd() {
      if (timer !== null) {
        clearInterval(timer);
      }
      timer = null;
    }

    function testData() {
      const testData: BundleInfo[] = [];

      for (let i = 0; i < 10; i++) {
        testData.push({
          name: i.toString(),
          url: i.toString(),
          desc: i.toString(),
        });
      }

      items.value = testData;
    }

    onMounted(async () => {
      scrollBegan();
      await pullRemoteBundles();
    });
    onUnmounted(() => {
      scrollEnd();
    });
    switchTips();

    async function pullRemoteBundles() {
      // githubusercontent需要翻墙
      // const url = 'https://raw.githubusercontent.com/game-sail/bundle-repo/main/index.json';
      // 利用jsdelivr提供cdn服务来保存数据
      const url = 'https://cdn.jsdelivr.net/gh/game-sail/bundle-repo/index.json';
      const res = await axios.get(url);
      const { data } = res;
      console.log(data);
      if (Array.isArray(data)) {
        items.value = data.map<BundleInfo>((item: any) => {
          return {
            name: item.name || '',
            url: item.url || '',
            desc: item.desc || '',
          };
        });
      }
    }

    const searchKey = ref('');
    return {
      list,
      items,
      searchKey,
      onSearchKeyBlur() {
        console.log(searchKey.value);
      },
      async onBtnSearch() {
        // await pullRemoteBundles();
      },
      switchTips,
      onClickList(item: { name: string, value: string, url: string, router: string }) {
        if (item.url && item.url.startsWith('http')) {
          return window.open(item.url);
        }

        if (item.router) {
          return router.push({ name: item.router });
        }
      },
      tip,

    };
  },
});

</script>

<style scoped lang="scss">
.mall {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;

  .line {
    padding: 8px 0;
    border-width: 10px 0 0;
    border-top-style: solid;
    border-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;
  }

  .title {
    display: flex;
    flex-direction: row;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid #d5d5d5;
    align-items: center;

    .tip {
      cursor: pointer;
      flex: 1;
      text-align: left;
      margin-left: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .list-container {
      display: flex;
      flex-direction: row;

      .list-item {
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        margin: 0 10px;
      }
    }
  }

  .search {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid #d5d5d5;

    .logo {
      margin-right: 20px;
      font-size: 40px;
      font-weight: bold;
      min-width: 230px;
    }

    .btn {
      background-color: #231f20;
      width: 120px;
      height: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &:hover {
        background-color: #3b3637;
      }

      .label {
        color: white;
        font-size: .875rem;
        font-family: 'Poppins';
        font-weight: bold;
      }
    }

    .input {
      display: flex;
      flex: 1;
      min-width: 210px;
      position: relative;

      .search {
        position: absolute;
        left: 3px;
        top: -4px;
        border: 0;
        font-size: 28px;
      }

      input {
        background: #f2f2f2;
        width: 100%;
        padding-left: 60px;
        height: 50px;
        box-sizing: border-box;
        font-size: 20px;
        outline: 0;
        border: 1px solid transparent;

        &:focus {
          border: 1px solid black;
        }
      }
    }

  }

  .content {
    flex: 1;
    overflow: auto;

    .nothing {
      margin: 10px;
      font-size: 40px;
      color: #bfcce0;
    }
  }
}
</style>